<template>
	<view class="popContent" :style="colorStyle">
		<view class="main_box">
			<view class="title_box">
				黄金回收金价
			</view>
			<view class="price_box">
				<text class="num">{{ confirmOrderDetail.bidprice||'0.00'}}</text><text class="unit">/克</text>
			</view>
			<view class="tip_box">
				金价参照上海黄金交易所 该金价仅供参考
			</view>
			<view class="input_box flex_sb">
				<view class="label">
					交易克重
				</view>
				<view class="input">
					<input type="digit" v-model="weightNum" class="inputBox" placeholder="请输入克重" />
				</view>
			</view>
			<view class="line_box"></view>
			<view class="back_type flex_sb">
				<view class="back_type_item" v-for="(item,index) in backTypeList" :key="index"
					:class="{'active':item.id==transactionType}" @click="changeTransactionType(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="address_box">
				<view class="address_title flex_sb" @click="onAddress">
					<text>寄件地址</text>
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class="info_box" v-if="addressId">
					<view class="text1">
						{{addressObj.real_name}} {{addressObj.phone}}
					</view>
					<view class="text2">
						{{addressName}}
					</view>
				</view>
				<view class="info_box" v-else>
					<view class="text1">
						请添加地址
					</view>
				</view>
			</view>
			<view class="list_item flex_sb">
				<view class="left">
					快递保险
				</view>
				<view class="right flex_s">
					<view>+{{ confirmOrderDetail.premium_price }}</view>
					<switch color="#10C759" :checked="insurance" @change="insuranceChange"
						style="transform:scale(0.7)" />
				</view>
			</view>
			<view class="list_item flex_sb">
				<view class="left">
					定金
				</view>
				<view class="right">
					<text class="price_num">${{confirmOrderDetail.deposit.toFixed(2)}}</text>
				</view>
			</view>
		</view>

		<view class="footer flex_sb">
			<view class="left">
				定金:<text class="red_class">{{confirmOrderDetail.deposit.toFixed(2)}}</text>
			</view>
			<view class="right" @click="openGuidePop">
				确认下单
			</view>
		</view>

		<uni-popup ref="timeGuidePopup" :safe-area="false" type="bottom" @touchmove.stop.prevent="">
			<view class="index_pop">

				<view class="tagTxt">需要支付定金的方式</view>
				<view class="moneyNum">{{ totalPrice }}</view>
				<view class="dangerRed">收到货当天定金将原路退回</view>
				<view class="processItem" style="padding: 43rpx 36rpx;">
					<view class="payBox flex_sb bdrder_bm">
						<view class="payLeft flex_j">
							<image src="@/static/imgs/pay0.png" class="payImg"></image>
							<view class="payInfo">
								<view class="typeName">余额支付</view>
								<view class="payTxt">
									<text style="margin-right: 10rpx;">当前余额{{ userInfo.now_money }} </text>
									<block v-if="Number(userInfo.now_money) < confirmOrderDetail.deposit">
										余额不足，<text class="dangerTxt"
											@click="$util.JumpPath('/pages/new_page/user/recharge')">请充值</text>
									</block>
								</view>
							</view>
						</view>
						<view class="payRadioBox" :class="{'payRadioActive': payIndex == 3}" @click="payIndex = 3">
							{{payIndex == 3 ? '✓' : ''}}
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="payBox flex_sb">
						<view class="payLeft flex_j">
							<image src="@/static/imgs/pay1.png" class="payImg"></image>
							<view class="payInfo">
								<view class="typeName">微信支付</view>
								<view class="payTxt">快捷支付</view>
							</view>
						</view>
						<view class="payRadioBox" :class="{'payRadioActive': payIndex == 1}" @click="payIndex = 1">
							{{payIndex == 1 ? '✓' : ''}}
						</view>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<view class="payBox flex_sb">
						<view class="payLeft flex_j">
							<image src="@/static/imgs/pay01.png" class="payImg"></image>
							<view class="payInfo">
								<view class="typeName">支付宝支付</view>
								<view class="payTxt">快捷支付</view>
							</view>
						</view>
						<view class="payRadioBox" :class="{'payRadioActive': payIndex == 2}" @click="payIndex = 2">
							{{payIndex == 2 ? '✓' : ''}}
						</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="footer_btn flex_c">
					<view class="btn_box" @click="submitBtn">
						确认支付
					</view>
				</view>
			</view>
		</uni-popup>




		<addressWindow ref="addressWindow" @changeTextareaStatus="changeTextareaStatus" :news='news' :address='address'
			:pagesUrl="pagesUrl" @OnChangeAddress="OnChangeAddress" @changeClose="changeClose"
			@OnDefaultAddress="OnDefaultAddress" @onHaveAddressList="onHaveAddressList"></addressWindow>

	</view>
</template>

<script>
	import {
		getAddressList
	} from '@/api/user.js';
	import couponListWindow from '@/components/couponListWindow';
	import addressWindow from '@/components/addressWindow';
	import pageFooter from '@/components/pageFooter/index.vue'
	import {
		homepage_gold,
		get_buyback_express_insurance,
		buyback_create_order,
		wechat_pay,
		buyback_cancel_order,
		balance_pay,
		buy_back_switch,
		article_details,
		buy_back_weight_range,
		buyback_business_time
	} from '@/api/new_api.js';
	import {
		getOpenAdv
	} from '@/api/api.js';
	import {
		getShare,
		getVersion
	} from "@/api/public.js";
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		USER_INFO
	} from '@/config/cache.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js'
	const typeMap = {
		'黄金': 1,
		'白银': 2,
		'铂金': 3,
		'钯金': 4,
	}
	const typeArr = ['', '黄金', '白银', '铂金', '钯金']
	import colors from '@/mixins/color';
	import {
		get
	} from 'http';
	export default {
		mixins: [colors],
		components: {
			addressWindow,
			pageFooter
		},
		data() {
			return {
				transactionType: 1,
				backTypeList: [{
					name: '现价回收',
					id: 1
				}, {
					name: '来料待结',
					id: 2
				}],
				addressObj: {}, //选择的地址

				HTTP_REQUEST_URL,
				statusBar: this.statusBar || 0,
				navBar: this.navBar || 0,
				stepArr: ['业务方式', '来料克重', '寄件地址', '付定方式'],
				stepIndex: 0,

				buybackType: 1,
				payIndex: 3,
				isSubmit: false,
				headTxt: '您要和我们交易的方式？',
				weightNum: '', // 克重
				isTerms: false, // 条款

				coupon: {
					coupon: false,
					list: [],
					statusTile: this.$t(`立即使用`)
				}, //优惠券组件
				news: 0,
				address: {
					address: false
				}, //地址组件
				pagesUrl: "",
				pinkId: '',
				addressId: '',
				textareaStatus: false,
				couponTitle: '',
				couponId: '',
				haveAddressList: false,
				addressName: '', // 地址


				defaultData: {
					startTime: '',
					endTime: ''
				},
				minDate: {
					year: 2024,
					month: 11,
					date: 5
				},
				maxDate: {
					year: 2099,
					month: 12,
					date: 31
				},

				insurance: false,
				userInfo: {},
				confirmOrderDetail: {
					deposit: 0, // 定金
					premium_price: 0 //保险费
				},
				timecount: undefined,
				times: 0,
				richData: '',
				buyBackWeightRange: {},
				shareInfo: {},
				computeTotalPrice:0
			}
		},
		watch: {
			weightNum: function(n, o) {
				if (n) {
					this.get_buyback_express_insurance()
				} else {
					this.totalPrice = 0
				}
			}
		},
		onLoad() {
			this.getAddressList()
			// this.article_details()
			// this.buy_back_weight_range()
			// this.setOpenShare()
		},
		onShow() {
			// this.buy_back_switch()
			// this.homepage_goldHandle()
			this.getUserInfo()
			if (this.stepIndex >= 2) {
				this.get_buyback_express_insurance()
			}
		},
		onHide() {
			// this.clearTimer()
		},
		onUnload() {
			// this.clearTimer()
		},
		computed: {
			totalPrice: {
				get: function() {
					
					if (this.insurance) {
						if (this.transactionType == 1) {
							this.computeTotalPrice= (this.confirmOrderDetail.deposit * 100 + this.confirmOrderDetail.premium_price *
								100) / 100
						} else {
							this.computeTotalPrice= this.confirmOrderDetail.premium_price.toFixed(2)
						}
					} else {
						if (this.transactionType == 1) {
							this.computeTotalPrice= this.confirmOrderDetail.deposit
						} else {
							this.computeTotalPrice= this.confirmOrderDetail.premium_price.toFixed(2)
						}
					}
					return this.computeTotalPrice
				},
				set: function(newValue) {
					this.computeTotalPrice= newValue;
					console.log(this.computeTotalPrice,"------------");
					console.log(this.totalPrice,"------------");
				}

			},
			weightRange() {
				let range = {
					min: 10,
					max: 100
				}
				try {
					const {
						gold_buy_weight,
						palladium_buy_weight,
						platinum_buy_weight,
						sliver_buy_weight
					} = this.buyBackWeightRange
					if (this.buybackType == 1) {
						range = {
							min: gold_buy_weight[0],
							max: gold_buy_weight[1]
						}
					}
					if (this.buybackType == 2) {
						range = {
							min: sliver_buy_weight[0],
							max: sliver_buy_weight[1]
						}
					}
					if (this.buybackType == 3) {
						range = {
							min: platinum_buy_weight[0],
							max: platinum_buy_weight[1]
						}
					}
					if (this.buybackType == 4) {
						range = {
							min: palladium_buy_weight[0],
							max: palladium_buy_weight[1]
						}
					}
				} catch (error) {
					// 
				}
				return range
			}
		},
		methods: {
			getAddressList: function() {
				let that = this;
				getAddressList({
					page: 1,
					limit: 5
				}).then(res => {
					let addressList = res.data;

					if (addressList.length) {
						let defaultIndex = 0
						//处理默认选中项
						for (let i = 0, leng = addressList.length; i < leng; i++) {
							if (addressList[i].is_default == 1) {
								defaultIndex = i;
							}
						}
						const _default = addressList[defaultIndex]
						let addressName = _default.province + _default.city + _default.district + _default
							.detail
						uni.setStorageSync('addressName', addressName)
						uni.setStorageSync('addressObj', _default)
						this.addressObj = _default
						this.addressName = addressName
						this.addressId = _default.id
					}
				})
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data
					this.$store.commit('UPDATE_USERINFO', res.data)
				});
				this.$refs.addressWindow.getAddressList();
			},

			get_buyback_express_insurance() {

				get_buyback_express_insurance({
					weight: this.weightNum,
					type: this.buybackType
				}).then(({
					code,
					data
				}) => {
					this.confirmOrderDetail = {
						...this.confirmOrderDetail,
						...data
					}
				})

			},


			async createOrder() {
				try {
					if (this._loading) return
					this._loading = true

					const {
						data
					} = await buyback_create_order({
						"weight": this.weightNum,
						// "start_date": '2024-11-19 20:00',
						// "end_date": '2024-11-19 21:00',
						"pay_type": this.payIndex,
						"address_id": this.addressId,
						"insured": this.insurance ? this.confirmOrderDetail.premium_price : 0,
						"order_type": this.transactionType,
						"type": this.buybackType
					})
					const order_info = data.order_info
					this._order_sn = order_info.order_sn
					this.confirmOrderDetail.add_time = order_info.add_time
					this.confirmOrderDetail.recycle_price = order_info.recycle_price
					uni.setStorage({
						key: 'buyback_confirmOrderDetail',
						data: this.confirmOrderDetail
					})
					if (this._insurance_timer) {
						clearInterval(this._insurance_timer)
						this._insurance_timer = null
					}

					// 来料待结，未勾选快递保险，不用支付
					if (this.transactionType == 2 && this.insurance == 0) {
						this.$util.Tips({
							title: '下单成功'
						})
						this.$refs.popup.close()
						this._loading = false
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/new_gold/repurchase/orderSuccess'
							})
						}, 1500)
						return
					}

					// this.isSubmit = true
					this._checkSubmit = true
					this._loading = false
				} catch (e) {
					this._checkSubmit = false
					this._loading = false
				}
			},

			insuranceChange(v) {
				if (!this.weightNum) return this.$util.Tips({
					title: '请输入克重'
				})
				this.insurance = v.detail.value
				this.get_buyback_express_insurance()
			},

			changeTransactionType(v) {
				this.transactionType = v
				this.confirmOrderDetail.order_type = ['', '定价回收', '来料待结'][v]
				if (this.transactionType == 2) {
					this.stepArr[3] = '支付方式'
				} else {
					this.stepArr[3] = '付定方式'
				}
			},

			async submitBtn() {
				this._checkSubmit = false
				// if(this.transactionType == 1 && this.payIndex == 3 && Number(this.userInfo.now_money) < this.confirmOrderDetail.deposit) {
				if (this.payIndex == 3 && Number(this.userInfo.now_money) < this.confirmOrderDetail.deposit) {
					return this.$util.Tips({
						title: this.$t(`余额不足，请先充值`)
					});
				}

				// 来料待结，未勾选快递保险，不用支付
				if (this.transactionType == 2 && this.insurance == 0) {
					await this.createOrder()
					return
				}

				await this.createOrder()

				if (!this._checkSubmit) return

				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				if (this.payIndex === 1) {
					// 微信支付
					const {
						status,
						data
					} = await wechat_pay({
						paytype: 'weixin',
						uni: this._order_sn
					})
					if (status === 200) {
						uni.requestPayment({
							...data.result.jsConfig,
							success: (res) => {
								console.log('pay success', res);
								this.$util.Tips({
									title: '支付成功'
								})
								setTimeout(() => {
									this.$util.JumpPath('/pages/new_gold/repurchase/orderSuccess')
								}, 1500)
							},
							fail: (e) => {
								console.error('pay fail', e);
								buyback_cancel_order({
									order_sn: this._order_sn
								})
								this.$util.Tips({
									title: '支付失败'
								})
							},
							complete: () => {
								this.$refs.popup.close()
							}
						})
					}
				} else if (this.payIndex === 2) {
					// 支付宝支付
				} else if (this.payIndex === 3) {
					// 余额支付
					balance_pay({
						order_sn: this._order_sn
					}).then(({
						status,
						data
					}) => {
						if (status === 200) {
							this.$util.Tips({
								title: '支付成功'
							})
							setTimeout(() => {
								this.$util.JumpPath('/pages/new_gold/repurchase/orderSuccess')
							}, 1500)
						} else {
							this.$util.Tips({
								title: '支付失败'
							})
						}
						this.$refs.popup.close()
					})
				}
			},

			close() {
				this.$refs.popup.close()
				if (this._insurance_timer) {
					clearInterval(this._insurance_timer)
					this._insurance_timer = null
				}
				setTimeout(() => {
					this.stepIndex = 0
				}, 300)
			},
			onAddress: function() {
				let that = this;
				this.$refs.addressWindow.getAddressList();
				that.textareaStatus = false;
				that.address.address = true;
				this.pagesUrl = '/pages/users/user_address/index?news=' + this.news +
					'&pinkId=' +
					this.pinkId +
					'&couponId=' +
					this.couponId;
			},

			changeTextareaStatus: function() {
				for (let i = 0, len = this.coupon.list.length; i < len; i++) {
					this.coupon.list[i].use_title = '';
					this.coupon.list[i].is_use = 0;
				}
				this.textareaStatus = true;
				this.status = 0;
				this.$set(this.coupon, 'list', this.coupon.list);
			},
			/**
			 * 选择地址后改变事件
			 * @param object e
			 */
			OnChangeAddress: function(e) {
				this.textareaStatus = true;
				this.addressId = e;
				this.address.address = false;
				this.addressObj = uni.getStorageSync('addressObj')
				this.addressName = uni.getStorageSync('addressName')
			},
			OnDefaultAddress(e) {
				if (this.addressId) return
				this.textareaStatus = true;
				this.addressId = e;
				this.addressObj = uni.getStorageSync('addressObj')
				this.addressName = uni.getStorageSync('addressName')
			},
			// 关闭地址弹窗；
			changeClose: function() {
				this.$set(this.address, 'address', false);
			},
			onHaveAddressList() {
				this.haveAddressList = true
			},


			openGuidePop() {
				if (!this.weightNum) return this.$util.Tips({
					title: '请输入克重'
				})
				this.$refs.timeGuidePopup.open()
			},
			closeGuidePop() {
				this.$refs.timeGuidePopup.close()
			},

			article_details() {
				article_details({
					id: 7
				}).then((res) => {

					const data = res.data
					this.richData = this.setRichData(data.content)
				})
			},
			// 解决富文本图片没有设置适应宽度的问题
			setRichData(data) {
				return data.replace(/<img/g, "<img style='width:100%;height:auto;'")
			},
		}
	}
</script>


<style lang="scss" scoped>
	.footer {
		position: fixed;
		width: 100%;
		padding: 30rpx;
		left: 0;
		bottom: 0;
		padding-bottom: 40rpx;
		background: #fff;

		.left {
			font-size: 30rpx;
			color: #403F3F;

			.red_class {
				color: #D43030;
			}

		}

		.right {
			width: 280rpx;
			height: 85rpx;
			line-height: 85rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			border-radius: 55rpx;
			background: #85624B;
		}
	}

	.main_box {
		padding: 0 30rpx;
		margin-top: 30rpx;
		width: 700rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 200rpx;

		.list_item {
			height: 95rpx;
			line-height: 95rpx;

			.price_num {
				color: #D43030;
				font-size: 30rpx;
				font-weight: bold;
			}

			.left {
				font-size: 30rpx;
				font-weight: 500;
			}

			.right {}
		}

		.address_box {

			.address_title {
				margin-bottom: 25rpx;
				font-size: 30rpx;

			}

			.info_box {
				padding: 24rpx 30rpx;
				background-image: url('../static/map_bg.png');
				background-size: cover;
				border-radius: 12rpx;
				overflow: hidden;

				.text1 {
					font-size: 28rpx;
					margin-bottom: 10rpx;
					font-weight: bold;
				}

				.text2 {
					font-size: 24rpx;
				}
			}
		}

		.back_type {
			margin-bottom: 30rpx;

			.back_type_item {
				width: 298rpx;
				height: 111rpx;
				text-align: center;
				line-height: 111rpx;
				background: #F5F6F7;
				border-radius: 16rpx;
				font-size: 30rpx;
				font-weight: 700;
				color: #383838;
				border: 2rpx solid transparent;

				&.active {
					position: relative;
					color: #85624B;
					border: 2rpx solid #E6D399;
					background: #F4F0E7;
					
					&::before {
						position: absolute;
						left: 0;
						top: 0;
						content: "√";
						width: 44rpx;
						height: 38rpx;
						line-height: 38rpx;
						text-align: center;
						color: #000;
						font-size: 24rpx;
						background: #E6D399;
						border-radius: 16rpx 0rpx 16rpx 0rpx;
					}
				}
			}

		}

		.line_box {
			position: relative;
			height: 2rpx;
			border-radius: 16rpx;
			background: #F8F8FA;
			margin: 25rpx 0;

			&::after,
			&::before {
				position: absolute;
				content: "";
				top: 50%;
				transform: translateY(-50%);
				width: 26rpx;
				height: 26rpx;
				border-radius: 50%;
				overflow: hidden;
				background: #F8F8FA;
			}

			&::before {
				left: -40rpx;
			}

			&::after {
				right: -40rpx;
			}
		}

		.input_box {
			height: 111rpx;
			line-height: 111rpx;
			padding: 0 40rpx;
			border-radius: 16rpx;
			background: #F5F6F7;

			.label {
				color: #2B2D2C;
				font-size: 32rpx;
				font-weight: bold;
			}

			.input {
				text-align: right;

				input {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

		}

		.tip_box {
			text-align: center;
			background: #EDD3C1;
			border-radius: 10rpx;
			background: #FBF4F1;
			border: 1rpx solid #EDD3C1;
			line-height: 47rpx;
			color: #B88867;
			font-size: 26rpx;
			margin-bottom: 30rpx;
		}

		.price_box {
			text-align: center;
			color: #E33C64;
			margin-top: 40rpx;
			margin-bottom: 24rpx;

			.num {
				font-size: 60rpx;
				font-weight: bold;
			}

			.unit {
				font-size: 24rpx;
			}
		}

		.title_box {
			$border-w: 15rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #7D5A37;
			position: relative;
			width: 377.5rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			margin: 0 auto;
			background: linear-gradient(90deg, #F4EACC 0%, #F6EFDE 52.2%, #EDDFBD 100%);
			border-radius: 0rpx 0rpx 16rpx 16rpx;

			// transform:perspective(30rpx) rotateX(0deg);
			// transform-origin: center top; 
			.triangle1 {
				position: absolute;
				left: -30rpx;
				top: 0;
				border: $border-w solid #f4eacd;
				border-left: $border-w solid transparent;
				border-bottom: $border-w solid transparent;
			}

			&:before,
			&::after {
				position: absolute;
				content: "";
				top: 0;
				width: 0;
				height: 0;
				border-style: solid;

			}

			&::before {
				border-width: 0px 20rpx 48rpx 0;
				border-color: transparent rgb(244, 234, 205) transparent transparent;
				left: -18rpx;
			}

			&::after {
				border-width: 0px 0 48rpx 20rpx;
				border-color: transparent transparent transparent rgb(238, 225, 192);
				right: -18rpx;
			}
		}
	}

	.index_pop {
		padding-top: 50rpx;
		background: #F5F6F7;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		overflow: hidden;

		.footer_btn {
			margin-top: 50rpx;
			padding: 30rpx 0 50rpx;

			.btn_box {
				border-radius: 99rpx;
				width: 680rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				color: #fff;
				font-weight: bold;
				background: var(--view-theme);

			}
		}
	}

	.repurchase {
		overflow: hidden;
		position: relative;
		width: 100%;
		padding-bottom: 200rpx;
		background: rgb(246, 235, 213);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.head {
		width: 100%;
		height: 452rpx;
	}

	.time {
		font-size: 28rpx;
		color: rgba(140, 116, 70, 1);
		text-align: left;
		margin: 0 40rpx;
		margin-top: -150rpx;
	}





	.content {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		width: 690rpx;
		height: 750rpx;
		background: #FFFFFF;
		margin: 0rpx auto 25rpx;
		box-sizing: border-box;

	}

	.popContent {
		padding-top: 30rpx;
		position: relative;
		width: 750rpx;
		// height: 1140rpx;
		border-radius: 40rpx 40rpx 0 0;
		background: #F5F6F7;

		.closeBox {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			color: #FFF;
			text-align: center;
			font-size: 40rpx;
			font-weight: 700;
			line-height: 40rpx;
			background: #C3A769;

		}
	}




	.processItem {
		width: 664rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 0 36rpx;
		min-height: 127rpx;
		margin: 0 auto;

		.inputBox {
			width: 590rpx;
			height: 95rpx;
			text-align: center;
			font-size: 32rpx;
			line-height: 95rpx;
			border-radius: 12rpx;
			background: #F5F6F7;
			color: #383838;
		}

		.addressTxt {
			display: inline-block;
			width: 378rpx;
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(115, 114, 114, 1);
			text-align: right;
		}

		.name {
			position: relative;

			.wenhao-icon {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: -4rpx;
				right: -30rpx;
				z-index: 2;
			}
		}

	}

	.dangerTxt {
		font-size: 24rpx;
		color: rgba(212, 48, 48, 1);
		text-align: center;
		margin-top: 16rpx;
		margin-bottom: -16rpx;
	}

	.dangerRed {
		font-size: 24rpx;
		color: rgba(212, 48, 48, 1);
		text-align: center;
		margin: 0 auto 26rpx;
	}

	.tagTxt {
		font-size: 28rpx;
		line-height: 40.54rpx;
		color: rgba(128, 128, 128, 1);
		text-align: center;
	}

	.moneyNum {
		font-size: 60rpx;
		font-weight: 700;
		line-height: 86.88rpx;
		color: rgba(212, 48, 48, 1);
		text-align: center;
	}

	.payImg {
		width: 44rpx;
		height: 44rpx;
		margin-right: 16rpx;
	}

	.payInfo {
		margin-left: 8rpx;

		.typeName {
			font-size: 28rpx;
			font-weight: 550;
			text-align: left;
			color: #000;
		}

		.payTxt {
			font-size: 24rpx;
			text-align: left;
			color: rgba(43, 45, 44, 1);
		}
	}

	.payRadioBox {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		text-align: center;
		border: 3rpx solid #ccc;
	}

	.payRadioActive {
		font-weight: 700;
		color: #000;
		background: #E8CBA1;
	}

	.bdrder_bm {
		padding-bottom: 24rpx;
		margin-bottom: 36rpx;
		border-bottom: 2rpx solid rgba(204, 204, 204, 0.2);
	}
</style>